<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>景点编辑</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            background: linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%);
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            min-height: 100vh;
            margin: 0;
        }
        .container {
            width: 100vw;
            min-height: 100vh;
            background: #fff;
            box-shadow: none;
            border-radius: 0;
            padding: 48px 0 0 0;
            display: block;
        }
        .form-wrap {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
            background: #fff;
            padding: 32px 32px 24px 32px;
            border-radius: 12px;
            box-shadow: 0 2px 12px rgba(0,0,0,0.06);
        }
        h2#formTitle {
            margin-bottom: 32px;
            font-size: 28px;
            color: #222;
            font-weight: 700;
            letter-spacing: 2px;
            text-align: left;
        }
        .form-row {
            margin-bottom: 22px;
            width: 100%;
            display: flex;
            align-items: center;
        }
        .form-row label {
            width: 90px;
            color: #444;
            font-size: 16px;
            font-weight: 500;
            text-align: left;
        }
        .form-row input, .form-row textarea {
            flex: 1;
            padding: 10px 14px;
            border: 1.5px solid #e0e6ed;
            border-radius: 8px;
            font-size: 16px;
            background: #f8fafc;
            transition: border 0.2s;
        }
        .form-row input:focus, .form-row textarea:focus {
            border-color: #1890ff;
            outline: none;
            background: #fff;
        }
        .form-row textarea {
            resize: vertical;
            min-height: 60px;
            max-height: 180px;
        }
        .form-actions {
            text-align: left;
            margin-top: 36px;
            width: 100%;
        }
        .form-actions button {
            padding: 9px 32px;
            border: none;
            border-radius: 22px;
            font-size: 16px;
            margin: 0 10px 0 0;
            cursor: pointer;
            background: #1890ff;
            color: #fff;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(24,144,255,0.08);
            transition: background 0.2s, box-shadow 0.2s;
        }
        .form-actions button:hover {
            background: #40a9ff;
            box-shadow: 0 4px 16px rgba(24,144,255,0.13);
        }
        .form-actions .reset-btn {
            background: #fff;
            color: #1890ff;
            border: 1.5px solid #1890ff;
            box-shadow: none;
        }
        .form-actions .reset-btn:hover {
            background: #e6f7ff;
        }
        .form-actions .back-btn {
            background: #aaa;
            color: #fff;
            border: none;
        }
        .form-actions .back-btn:hover {
            background: #888;
        }
        @media (max-width: 800px) {
            .form-wrap { max-width: 98vw; padding: 18px 2vw 18px 2vw; }
            .form-row label { width: 80px; font-size: 15px; }
            .form-actions button { padding: 8px 18px; font-size: 15px; margin: 0 4px 0 0; }
        }
    </style>
</head>
<body>
<div class="container">
    <div class="form-wrap">
        <h2 id="formTitle">新增景点</h2>
        <form id="scenicForm" autocomplete="off">
            <div class="form-row">
                <label for="name">名字</label>
                <input type="text" id="name" name="name" required placeholder="请输入景点名字">
            </div>
            <div class="form-row">
                <label for="location">位置</label>
                <input type="text" id="location" name="location" required placeholder="请输入景点位置">
            </div>
            <div class="form-row">
                <label for="stock">库存</label>
                <input type="number" id="stock" name="stock" placeholder="请输入库存" required min="0">
            </div>
            <div class="form-row">
                <label for="ticketPrice">票价</label>
                <input type="number" id="ticketPrice" name="ticketPrice" required min="0" step="0.01" placeholder="请输入票价">
            </div>
            <div class="form-actions">
                <button type="submit">提交</button>
                <button type="reset" class="reset-btn">重置</button>
                <button type="button" class="back-btn" onclick="window.location.href='manage.html'">返回列表</button>
            </div>
        </form>
    </div>
</div>
<script>
// 判断是否为编辑
function getQueryParam(name) {
    var match = window.location.search.match(new RegExp('(?:[?&])' + name + '=([^&]*)'));
    return match ? decodeURIComponent(match[1]) : null;
}
var scenicId = getQueryParam('id');
if (scenicId) {
    document.getElementById('formTitle').innerText = '编辑景点';
    // 加载景点详情
    fetch('/api/scenic/' + scenicId, { method: 'GET' })
        .then(response => response.json())
        .then(data => {
            if (data) {
                document.getElementById('name').value = data.name || '';
                document.getElementById('location').value = data.location || '';
                document.getElementById('stock').value = data.stock || '';
                document.getElementById('ticketPrice').value = data.ticketPrice || '';
            }
        });
}
// 表单提交
 document.getElementById('scenicForm').onsubmit = function(e) {
    e.preventDefault();
    var scenic = {
        name: document.getElementById('name').value.trim(),
        location: document.getElementById('location').value.trim(),
        stock: document.getElementById('stock').value,
        ticketPrice: document.getElementById('ticketPrice').value
    };
    var url = '/api/scenic' + (scenicId ? ('/' + scenicId) : '');
    var method = scenicId ? 'PUT' : 'POST';
    if (scenicId) scenic.id = scenicId;
    fetch(url, {
        method: method,
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(scenic)
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('操作成功');
            window.location.href = 'manage.html';
        } else {
            alert(data.message || '操作失败');
        }
    });
};
</script>
</body>
</html> 